<template>
	<view class="waikuang">
		<view class="neirlan heng">
			<view>签订日期：</view>
			<view class="yanse">2021-11-22</view>
		</view>
		<view class="neirlan heng">
			<view>合同名称：</view>
			<view class="yanse">劳动合同</view>
		</view>
		<view class="neirlan heng">
			<view>合同类型：</view>
			<view class="shum">付款</view>
		</view>
		<view class="neirlan heng">
			<view>合同状态：</view>
			<view class="shum">合同已确认</view>
		</view>
		<view class="neirlan heng">
			<view>开始日期：</view>
			<view class="yanse">2021-11-22</view>
		</view>
		<view class="neirlan heng">
			<view>结束日期：</view>
			<view class="yanse">2022-11-22</view>
		</view>
		<view class="oiangb heng">
			<view class="heng">
				<view>合同金额：</view>
				<view class="jiner">3000元/月</view>
			</view>
			<!-- <view class="fukuan" @click="goshoufk(hetong)">付款</view> -->
		</view>
		<view class="neirlan">
			<view>合同备份：</view>
			<view class="huanhang">
				<image class="pingzhe" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffile1.renrendoc.com%2Ffileroot_temp2%2F2020-11%2F17%2F67cba290-38b3-468b-8dfb-3606b07f49fb%2F67cba290-38b3-468b-8dfb-3606b07f49fb1.gif&refer=http%3A%2F%2Ffile1.renrendoc.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645086728&t=43bf4848d83a3801c0da98de05b8486c" mode="aspectFill" @click="yulantup(idx)"></image>
			</view>
		</view>
		<view class="neirlan">
			<view>备注：</view>
			 <view class="beizu">合同一式两份，已交到甲已双方手上</view>
		</view>
		<!-- <view class="shanc" v-if="hetong.openid==openid&&hetong.yifuje==0" @click="delhetong(hetong.id)">删除合同</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgurl:'',
				openid:getApp().globalData.openid,
				hetong:null
			}
		},
		onLoad:function(ope){
			this.getzangdxq(ope.id);
		},
		methods: {
			// 合同收款或付款
			goshoufk(ht){
				wx.navigateTo({
					url:'../htfukuan/htfukuan?htid='+ht.id+'&htmc='+ht.htname+'&htlx='+ht.htleix
				})
			},
			// 删除合同
			delhetong(id){
				var that=this;
				wx.showModal({
					title: '警告',
					content: '确认要删除此合同吗？',
					success: function (res) {
						if (res.confirm) {  
							uni.request({
								url: getApp().globalData.url+'/DelHt',
								data:{
									id:id
								},
								header: {
								   "Content-Type": "text/html"
								}, 
								success(res) {
									if(res.data.code==200){
										uni.$emit('updateData', 1)
										wx.navigateBack({
											delta:1
										})
									}else{
										wx.showToast({
											title: '删除失败，请从试',
											icon: 'none', 
											duration: 2000     
										}) 
									}
								}
							})
						} else {   
							console.log('点击取消回调')
						}
					}
				})
			},
			// 预览图片
			yulantup(idx) {
				var that = this;
			    var img = that.hetong.htfuben;
				var url = getApp().globalData.imgurl;
				var image = [];
				for(let i=0;i<img.length;i++){
					image=image.concat(url+img[i])
				}
			    uni.previewImage({
			      current: image[idx],  //当前预览的图片
			      urls: image,  //所有要预览的图片
			    })
			 },
			// 获取详情
			getzangdxq(id){
				var that=this;
				that.imgurl = getApp().globalData.imgurl;
				uni.request({
					url: getApp().globalData.url+'/api/GetHtxq',
					data:{
						id:id
					},
					header: {
					   "Content-Type": "text/html"
					}, 
					success(res) {
						if(res.data.code==200){
							console.log('详情',res.data.data[0])
							that.hetong=res.data.data[0];
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.waikuang{
		width: 710rpx;
		padding: 20rpx;
		.shanc{
			width: 650rpx;
			margin: 50rpx 30rpx;
			height: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #ff0f77;
			color: #ffffff;
			border-radius: 30rpx;
		}
		.oiangb{
			background: #f0f0f0;
			padding: 30rpx;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.heng{
				display: flex;
				align-items: center;
				.jiner{
					color: #ff0066;
				}
			}
			.fukuan{
				width: 150rpx;
				height: 60rpx;
				border-radius: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #ff1070;
				color: #ffffff;
			}
			
		}
		.neirlan{
			background: #f0f0f0;
			padding: 30rpx;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			.shlieb{
				display: flex;
				justify-content: space-between;
				align-items: center;
				background: #ffffff;
				padding: 30rpx;
				border-radius: 20rpx;
				margin-top: 30rpx;
				.quer{
					color: #007AFF;
				}
				.weis{
					color: #ff217a;
				}
			}
			.beizu{
				width: 650rpx;
				margin-top: 25rpx;
				color: #2C405A;
			}
			.huanhang{
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				margin-top: 20rpx;
				.pingzhe{
					width: 200rpx;
					height: 200rpx;
					margin-top: 25rpx;
					margin: 0 15rpx 0 15rpx;
				}
			}
			.jiner{
				color: #ff0066;
			}
			.yanse{
				color: #2C405A;
			}
			.shum{
				margin-left: 50rpx;
				color: #e30f80;
			}
		}
		.heng{
			display: flex;
			align-items: center;
		}
	}
</style>
